<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>japanese Learning</title>
  <style>
    html *{
      /* outline: 1px solid black; */
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script>
    setFontsize()
    window.onresize = debounce()
    function debounce() {
      let timeout = null
      return function () {
        let that = this
        if (!timeout) {
          timeout = setTimeout(() => {
            setFontsize()
            timeout = null
          }, 200)
        }
      }
    }
    function setFontsize() {
      var deviceWidth = document.documentElement.clientWidth || window.innerWidth
      console.log(deviceWidth)
      if (deviceWidth < 400) {
        document.documentElement.style.fontSize = 35 + 'px'
        console.log(document.documentElement.style.fontSize)
      }
      else {
        var fsize = deviceWidth / 25
        document.documentElement.style.fontSize = fsize <45 ? 45 + 'px' : fsize + 'px'
        console.log("根字体" + deviceWidth, document.documentElement.style.fontSize)
      }
    }
  </script>
</body>
</html>
